<template>
	<view class="add">
		<u-navbar
			title="创建账单"
			:border-bottom="false"  
		>
			<view class="navbar__right" slot="right">
				<view class="navbar__right__icon">
					<u-icon name="more-dot-fill" @click="bill__more"></u-icon>
				</view>
			</view>
		</u-navbar>
		<view class="add__block">
			<view class="add__block__param">
				<view class="add__block__param__select">
						<v-require-text class="add__block__param__select__name">
							园区
						</v-require-text>
					<view class="add__block__param__select__value">
						<view v-if="parkId!=''" class="add__block__param__select__value--filled" @click="parkSelect=true">{{parkName}}</view>
						<view v-else @click="parkSelect=true">请选择</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<u-select 	v-model="parkSelect"
							:list="parkList" 
							@confirm="parkConfirm"
							value-name="parkId"
							label-name="parkName"></u-select>
			</view>
			<view class="add__block__param">
				<view class="add__block__param__select">
					<v-require-text class="add__block__param__select__name">
						企业
					</v-require-text>
					<view class="add__block__param__select__value">
						<view v-if="enterpriseId!=''" class="add__block__param__select__value--filled" >{{enterpriseName}}</view>
						<view v-else @click="enterpriseSelect=true">请选择</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<u-select 	v-model="enterpriseSelect"
							:list="enterpriseList" 
							@confirm="enterpriseConfirm"
							value-name="id"
							label-name="name"></u-select>		
			</view>

		</view>
		
		<view class="add__content">
			<view class="add__content__title">缴费内容</view>
			<view class="add__content__list" v-for="(billContent,index) in billContents">
				<view class="add__content__list__remove" @click="removeContent(index)">
					<u-icon name="minus-circle"></u-icon>
				</view>
				<view class="add__content__list__info">
					<view class="add__content__list__info__type"@click="billTypeSelect=true">
						<view>类型：{{billContent.name}}</view>
						<u-icon name="arrow-down-fill"></u-icon>
					</view>
					<u-select 	v-model="billTypeSelect"
								:list="billTypeList" 
								@confirm="billTypeConfirm($event,index)"
								value-name="id"
								label-name="name"></u-select>
					<view class="add__content__list__info__payment">
						<view class="add__content__list__info__payment__block">
							<v-require-text class="add__content__list__info__payment__block__text">
								应付
							</v-require-text>
							<view class="add__content__list__info__payment__block__value">
								<u-field
									v-model="billContent.payableAmount"
									input-align="right"
									:border-bottom="false"
									placeholder="输入金额"
								>
								</u-field>
							</view>
						</view>
						
						<view class="add__content__list__info__payment__block">
							<v-require-text class="add__content__list__info__payment__block__text">
								减免
							</v-require-text>
							<view class="add__content__list__info__payment__block__value">
								<u-field
									v-model="billContent.reducedAmount"
									input-align="right"
									placeholder="输入金额"
									:border-bottom="false"
								>
								</u-field>
							</view>
						</view>
						
						<view class="add__content__list__info__payment__block">
							<v-require-text class="add__content__list__info__payment__block__text">
								实付
							</v-require-text>
							<view class="add__content__list__info__payment__block__value">
								<u-field
									v-model="billContent.actualAmount"
									input-align="right"
									placeholder="输入金额"
									:border-bottom="false"
								>
								</u-field>
							</view>
						</view>
						
					</view>
					<view class="add__content__list__info__detail">
						<view>明细</view>
						<view class="add__content__list__info__detail__input">
							<u-field
								v-model="billContent.detail"
								type="textarea"
								:border-bottom="false"
								>
							</u-field>
						</view>
					</view>
				</view>
			</view>
			
			<view class="add__content__list" @click="addbillContent()">
				<view class="add__content__list__add">
					<u-icon name="plus"></u-icon>
					<view>添加缴费</view>
				</view>
			</view>
			
		</view>
		<view class="add__block">
			<view class="add__block__param">
				<view class="add__block__param__select">
					<v-require-text class="add__block__param__select__name">
						收费日期
					</v-require-text>
					<view class="add__block__param__select__value">
						<view v-if="chargeDate!=''" class="add__block__param__select__value--filled" >{{chargeDate}}</view>
						<view v-else @click="timePicker=true">请选择</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<u-picker mode="time" 
					v-model="timePicker" 
					:params="timePickerParams"
					@confirm="timeConfirm">
				</u-picker>		
			</view>
			
			<view class="add__block__param">
				<view class="add__block__param__textarea">
					<view class="add__block__param__textarea__name">
						账单备注
					</view>
					<view class="add__block__param__textarea__input">
						<u-field
							v-model="remark"
							type="textarea"
							:border-bottom="false"
							placeholder="text"
							>
						</u-field>
					</view>	
				</view>

			</view>
			
		</view>
		

		
		<view class="add__block">
			<view class="add__block__param">
				<view class="add__block__param__input">
					<v-require-text class="add__block__param__input__name">
						支付凭证
					</v-require-text>
					<view class="add__block__param__input__value">
						<u-field
							v-model="paymentDocumentUrl"
							input-align="right"
							placeholder="输入url"
							:border-bottom="false"
						>
						</u-field>
					</view>
				</view>	
<!-- 				<view class="add__block__param__info__detail__upload">
					<view v-if="paymentDocumentUrl!=''" class="add__block__param__info__detail__upload__image">
						<image :src="paymentDocumentUrl"></image>
					</view>
					<view v-else class="add__block__param__info__detail__upload__choose-box">
						<view>上传框</view>
					</view>
				</view>	 -->
			</view>
		</view>
		<view class="add__bottom-box">
			<view class="add__bottom-box__cancel" @click="cancelModel=true">取消</view>
			<view class="add__bottom-box__submit" @click="clickSubmit">提交</view>
		</view>
		<u-modal v-model="cancelModel"
			:show-title="false"
			content="确认取消"
			:show-cancel-button="true"
			confirm-color="#177fff"
			@confirm="goback">
		</u-modal>
		<u-modal v-model="submitModel" 
			:show-title="false"
			content="确认提交"
			:show-cancel-button="true"
			confirm-color="#177fff"
			@confirm="submit">
		</u-modal>
	</view>
</template>

<script>
	// 测试数据
	import testData from './testData.js'
	
	import requireText from '../../../../component/requireText.vue'
	export default {
		components:{
			'v-require-text':requireText
		},
		data() {
			return {
				parkId:"",
				parkName:"",
				enterpriseId:"",
				enterpriseName:"",
				billContents:[],
				payableTotal:"",
				reducedTotal:0,
				actualTotal:0,
				remark:"",
				chargeDate:"",
				paymentDocumentUrl:"",
				parkList:"",
				enterpriseList:"",
				billTypeList:[],
				parkSelect:false,
				enterpriseSelect:false,
				billTypeSelect:false,
				
				timePicker:false,
				timePickerParams:{
					year: true,
					month: true,
					day: true,
				},
				cancelModel:false,
				submitModel:false,
				content:"确认提交"
			}
		},
		mounted(){
			this.parkList=testData.parkList;
			this.enterpriseList=testData.enterPriseList;
			this.billTypeList=testData.billTypeList;
		},
		methods: {
			goback(){
				console.log("back")
				uni.navigateBack({
					animationDuration:1000,
					animationType:"pop-out"
				})
			},
			getFormatDate(year,month,day){
				// month=month>=10?month:'0'+month;
				// day=day>=10?day:'0'+day;
				return year+"-"+month+"-"+day;
			},
			getRequestDateFormat(dateString){
				let date=dateString.split("-");
				return data[0]+date[1]+data[2];
			},
			timeConfirm(date){
				this.chargeDate=this.getFormatDate(date.year,date.month,date.day)
				// getBillList();
			},
			parkConfirm(park){
				console.log(park);
				this.parkId=park[0].value;
				this.parkName=park[0].label
			},
			enterpriseConfirm(enterprise){
				console.log(enterprise);
				this.enterpriseId=enterprise[0].value;
				this.enterpriseName=enterprise[0].label;
			},
			addbillContent(){
				this.billContents.push({
					id:"0",
					name:this.billTypeList[0].name,
					detail:"",
					payableAmount:'',
					reduceAmount:'',
					actualAmount:'',
				})
			},
			billTypeConfirm(type,index){
				console.log(type,index)
				this.billContents[index].name=type[0].label;
			},
			removeContent(index){
				this.billContents.splice(index,1)
			},
			clickSubmit(){
				
				if(this.parkId==''){
					uni.showToast({
						title:"请选择园区",
						icon:"none",
						duration:2000
					})
					return
				}
				if(this.enterpriseId==''){
					uni.showToast({
						title:"请选择企业",
						icon:"none",
						duration:2000
					})
					return
				}
				if(this.billContents.length==0){
					uni.showToast({
						title:"请添加缴费",
						icon:"none",
						duration:2000
					})
					return
				}
				
				for (let index in this.billContents){
					if(this.billContents[index].payableAmount==''){
						uni.showToast({
							title:"请添加"+this.billContents[index].name+"应付金额",
							icon:"none",
							duration:2000
						})
						return 
					}
					if(this.billContents[index].reducedAmount==''){
						uni.showToast({
							title:"请添加"+this.billContents[index].name+"减免金额",
							icon:"none",
							duration:2000
						})
						return 
					}
					if(this.billContents[index].actualAmount==''){
						uni.showToast({
							title:"请添加"+this.billContents[index].name+"实付金额",
							icon:"none",
							duration:2000
						})
						return 
					}
				}
				this.submitModel=true	
			},
			submit(){
				
				
				// 提交请求
				uni.showToast({
					title:"提交成功",
					icon:"none",
					duration:2000,
					success() {
						setTimeout(function(){
							uni.navigateTo({
								url:"/pages/core/service/bill/myBill"
							});
						},500)
					}
				})

			}
		}
	}
</script>

<style lang="less">
.navbar{
	&__right{
		display: flex;
		flex-direction: row;
		margin-right: @uni-spacing-col-base;
		margin-left: auto;

		&__icon{
			font-size: @uni-font-size-x-lg;
			margin-left: @uni-spacing-col-base;
			margin-right: @uni-spacing-col-base;
		}
	}
}
.add{
	display: flex;
	flex-direction: column;
	background-color: @uni-bg-color-grey;
	padding-bottom: calc(10vh);
	
	&__block{
		display: flex;
		flex-direction: column;
		margin-top: @uni-spacing-row-sm;
		padding-left: @uni-spacing-col-lg;
		padding-right: @uni-spacing-col-lg;
		background-color: #fff;
		&__param{
			font-display: flex;
			flex-direction: column;

			border-bottom: 0.1px solid @uni-border-color;
			&__select{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding-top: @uni-spacing-row-lg;
				padding-bottom: @uni-spacing-row-lg;
				&__title{
					
				}
				&__textarea{
					margin-left: 0;
					margin-right: auto;
				}
				&__value{
					display: flex;
					flex-direction: row;
					color: @font-color-grey;
					&__filled{
						color: @font-color-black;
					}
				}

			}
			&__input{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				// padding-top: @uni-spacing-row-lg;
				// padding-bottom: @uni-spacing-row-lg;
				&__title{
					
				}
				&__value{
					display: flex;
					flex-direction: row;
					flex: 1;
					color: @font-color-grey;
					&__filled{
						color: @font-color-black;
					}
				}
			
			}
			&__textarea{
				display: flex;
				flex-direction: row;
				
				padding-top: @uni-spacing-row-lg;
				padding-bottom: @uni-spacing-row-lg;

				&__input{
					flex:1;
				}
				&__value{
					display: flex;
					flex-direction: row;
					color: @font-color-grey;
					&__filled{
						color: @font-color-black;
					}
				}
			}
		}
	}
	&__content{
		display: flex;
		flex-direction: column;
		padding-left: @uni-spacing-col-lg;
		padding-right: @uni-spacing-col-base;
		&__title{
			
		}
		&__list{
			display:flex;
			flex-direction: row;
			// align-items: center;
			margin-top: @uni-spacing-row-sm;
			padding-right: @uni-spacing-col-lg;
			background-color: #fff;
			border-radius: @uni-border-radius-base;
			&__add{
				display: flex;
				flex-direction:row ;
				align-self: center;
				margin-left: auto;
				margin-right: auto;
				margin-top: @uni-spacing-row-lg;
				margin-bottom: @uni-spacing-row-lg;
				font-size: @uni-font-size-lg;
				color: @font-color-blue;
			}
			&__remove{
				padding: @uni-spacing-row-lg;
				font-size: @uni-font-size-x-lg;
				color: @font-color-red;
			}
			&__info{
				display: flex;
				flex-direction: column;
				padding-top: @uni-spacing-row-lg;
				padding-bottom: @uni-spacing-row-lg;
				&__type{
					display: flex;
					flex-direction: row;
				}
				&__payment{
					display: flex;
					flex-direction: column;
					font-size: @uni-font-size-sm;
					&__block{
						display: flex;
						flex-direction: row;
						align-items: center;
						border-bottom: 0.1px solid @uni-border-color;
						&__value{
							flex: 1;
							text-align: right;
						}
					}
				}
				&__detail{
					display: flex;
					flex-direction: column;
					margin-top: @uni-spacing-row-sm;
					font-size: @uni-font-size-sm;
					color: @font-color-grey;
					&__input{
						margin-top: @uni-spacing-row-sm;
						border: 0.1px solid @uni-border-color;
					}
				}
			}
		}
	}
	&__bottom-box{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		position: fixed;
		padding: @uni-spacing-row-lg @uni-spacing-col-lg;
		bottom: 0;
		width: calc(100vw);
		background-color: #fff;
		
		&__cancel{
			margin-right: @uni-spacing-col-lg;
			padding-top: @uni-spacing-row-base;
			padding-bottom: @uni-spacing-row-base;
			text-align: center;
			flex: 0.5;
			border-radius: @uni-border-radius-base;
			border: 1px solid @font-color-blue;
			font-size: @uni-font-size-lg;
			color: @font-color-blue;
		}
		&__submit{
			padding-top: @uni-spacing-row-base;
			padding-bottom: @uni-spacing-row-base;
			text-align: center;
			flex: 1;
			border-radius: @uni-border-radius-base;
			border: 1px solid @font-color-blue;
			background-color: @uni-bg-color-blue;
			font-size: @uni-font-size-lg;
			color: #fff;
		}
	}
}
</style>
